<template>
    <div class="box-padding">
        <div class="role-title">下月动态编辑</div>
        <Row :gutter="16">
            <Col span="4">
                <!-- <Select v-model="projectId" :disabled="list.length > 0 || $route.query.proId!=''" placeholder="项目名称" label-in-value @on-change="projectSelect">
                    <Option v-for="item in projects" :value="item.id" :key="item.id">{{ item.shortName }}</Option>
                </Select> -->
                <Input v-model="dyNamicsObj.projectName" placeholder="项目名称" readonly />
            </Col>
            <Col span="8">
                <Input v-model="dyNamicsObj.dynamicRiskOrderListName" placeholder="动态清单名称" readonly />
            </Col>
            <Col span="8">
                <Button type="primary" @click="isLastMonth = !isLastMonth,$refs.lastMonth.setProjectId()">上月动态管控表选择</Button>
                <Button style="margin-left:15px;" type="primary" @click="isNextMonth = !isNextMonth,$refs.nextMonth.setProjectId()">下月在施风险选择</Button>
            </Col>
            <!-- <Col span="4">
                <Button type="primary" @click="isNextMonth = !isNextMonth,$refs.nextMonth.setProjectId()">下月在施风险选择</Button>
            </Col> -->
            <Col span="4" style="text-align:right;">
                <Button type="primary" @click="addRow">新增一行</Button>
            </Col>
        </Row>
        <Table class="table" border disabled-hover :columns="columns" :data="dyNamicsObj.dynamicConstructionPointDtoList" no-data-text="暂无数据" style="margin-top:20px;">
            <template slot-scope="{ row, index }" slot="operation">
                <!-- <a @click="emptyData(index)" style="margin-right:10px;">清空</a> -->
                <!-- <a @click="plan(row, index)" style="margin-right:10px;">方案制定</a> -->
                <a v-if="row.fa" style="margin-right:10px; color:#ccc;">方案制定</a>
                <a v-else style="margin-right:10px;" @click="plan(row, index)" >方案制定</a>
                <a @click="addInnerRow(row, index)" style="margin-right:10px;">下加行</a>
                <a @click="detailObj=row,itemModal = !itemModal,$refs.tab5.setData(),$refs.tab4.setData()" style="margin-right:10px;">详情</a>
                <a @click="initRemoveRow(index)">删除</a>
            </template>
        </Table>
        <div style="text-align:center;margin-top:20px;">
            <Button type="primary" @click="save">确定</Button>
            <Button style="margin-left: 20px;" @click="closeTab">取消</Button>
        </div>
        <Modal v-model="itemModal" title="动态详情" width="70%" class="modal" :footer-hide="true">
            <div class="modal-content">
                <Tabs value="name1">
                    <TabPane label="风险详情" name="name1">
                        <tab4 :detailObj="detailObj" ref="tab4"></tab4>
                    </TabPane>
                    <TabPane label="方案信息" name="name2">
                        <tab5 :detailObj="detailObj" ref="tab5"></tab5>
                    </TabPane>
                </Tabs>
            </div>
        </Modal>
        <Modal v-model="isLastMonth" title="动态管控表选择" width="80%" :footer-hide="true">
            <div class="modal-content">
                <lastMonth :projectIds="projectId" ref="lastMonth" @isLastMonthMethods="isLastMonthMethods" @addList="addList"></lastMonth>
            </div>
        </Modal>
        <Modal v-model="isNextMonth" title="下月在施风险选择" width="80%" :footer-hide="true">
            <div class="modal-content">
                <nextMonth :projectName="projectName" :projectIds="projectId" ref="nextMonth" @isNextMonthMethods="isNextMonthMethods" @addList="addList"></nextMonth>
            </div>
        </Modal>
        <Modal v-model="isPlan" title="方案制定" width="80%" :footer-hide="true">
            <div class="modal-content">
                <plan @isPlanMethods="isPlanMethods" :projectIds="projectId" ref="planobj" @isPlanObj="isPlanObj" :planRow="planRow" :dynamicRiskOrderId="dynamicRiskOrderId" :riskOperationId="riskOperationId" :source="source" :pointId="pointId" :editType="editType"></plan>
            </div>
        </Modal>
        <Modal v-model="modal" title="工点选择" width="70%" height="70%" class="modal" :footer-hide="true">
            <div class="modal-content">
                <gongdian :projectName="projectName" :projectIds="projectId" @isGongdian="isGongdian" @gongObj="gongObj"></gongdian>
            </div>
        </Modal>
        <Modal v-model="dynamicLledgerModel" title="风险内容选择" width="70%" class="modal" :footer-hide="true">
            <div class="modal-content">
                <dynamicLledger :riskType="riskType" :projectId="projectId" :jgId="jgId" @isdynamicLledger="isdynamicLledger" @ledgerObj="ledgerObj" ref="dynamicLledger"></dynamicLledger>
            </div>
        </Modal>
    </div>
</template>
<script>
import { mapMutations } from 'vuex'
import plan from '../plan/plan-tab'
import lastMonth from '../dynamics-monthly/last-month'
import nextMonth from '../dynamics-monthly/next-month'
import tab4 from '../dynamics-monthly/detail-tab-month/tab4'
import tab5 from '../dynamics-monthly/detail-tab-month/tab5'
import dynamicLledger from '../../ledger-query/DynamicLledger'
import gongdian from '../dynamics-monthly/detail-tab-month/gongdian'
export default {
    name:'dynamics-edit',
    components: {
        tab4,
        tab5,
        plan,
        lastMonth,
        nextMonth,
        dynamicLledger,
        gongdian
    },
    data(){
        return{
            editType:'edit',
            detailObj:{},
            itemModal:false,
            isLastMonth:false,
            isNextMonth:false,
            modal:false,
            isPlan:false,
            dynamicLledgerModel:false,
            isSave:true,
            riskType: true,
            projectId:'',
            jgId: '',
            projectName:'',
            dyNamicsObj:{},
            riskCategories:[],
            list:[],
            columns: [
                {
                    type: 'index',
                    width: 70,
                    align: 'center',
                    title: '序号'
                },
                {
                    title: '工点名称',
                    key: 'pointName',
                    align: 'center',
                    render: (h, params) => {
                        const row = params.row
                        const temp = row.pointId ? [h('span',{},params.row.pointName)] : [
                            h('span',
                                {
                                    style: {
                                        color: '#0099FF',
                                        fontSize: '13px',
                                        cursor: 'pointer'
                                    },
                                    on: {
                                        click: () => {
                                            this.initSelectWork(params.index)
                                        }
                                    }
                                },
                                '选择内容'
                            )
                        ]
                        return h('div', temp)
                    }
                },
                {
                    title: '工点风险等级',
                    key: 'pointRiskGradeName',
                    align: 'center'
                },
                {
                    title: '当月是否作业',
                    key: 'isThisMonthWorked',
                    align: 'center'
                },
                {
                    title: '作业风险名称',
                    key: 'riskName',
                    align: 'center',
                    render: (h, params) => {
                        const row = params.row.riskOperationDtoList[0]
                        const temp = row && (row.riskOperationId || row.riskOperationName) ? 
                            [h('span',{},params.row.riskOperationDtoList[0].riskOperationName)] : [h('span',
                                {
                                    style: {
                                    color: '#0099FF',
                                    fontSize: '13px',
                                    cursor: 'pointer'
                                },
                                on: {
                                    click: () => {
                                        this.initSelectRisk(params.index)
                                    }
                                }
                            },'选择内容')
                        ]
                        return h('div', temp)
                    }
                },
                {
                    title: '作业风险类别',
                    align: 'center',
                    key: 'riskCategoryIds',
                    render: (h, params) => {
                        const row = params.row.riskOperationDtoList[0]
                        const temp = row && row.riskCategoryIds ? 
                            [h('span',{},params.row.riskOperationDtoList[0].riskCategoryNames)] : [h('Select',
                                {
                                    props: {
                                        value: params.row.riskCategoryIds,
                                        size: 'small',
                                        transfer: true,
                                        multiple: true
                                    },
                                    // on: {
                                    //     'on-change': e => {
                                    //         this.list[params.row._index].riskCategoryIds = e
                                    //     }
                                    // }
                            },
                            this.riskCategories.map(item => {
                                return h('Option', {
                                    props: {
                                        value: item.id,
                                        label: item.riskCategoryName
                                    }
                                })
                            }))
                        ]
                        return h('div', temp)
                    }
                },
                {
                    title: '作业风险等级',
                    align: 'center',
                    key: 'riskLevel',
                    render: (h, params) => {
                        const row = params.row.riskOperationDtoList[0]
                        const temp = row && row.riskLevel ? 
                            [h('span',{},params.row.riskOperationDtoList[0].riskLevelName)] : [h('Select',
                                {
                                    props: {
                                        value: '',
                                        size: 'small',
                                        transfer: true
                                    },
                                    // on: {
                                    //     'on-change': e => {
                                    //         this.list[params.row._index].riskLevel = e
                                    //     }
                                    // }
                            },
                            this.riskLevels.map(item => {
                                return h('Option', {
                                    props: {
                                        value: item.value,
                                        label: item.text
                                    }
                                })
                            }))
                        ]
                        return h('div', temp)
                    }
                },
                {
                    title: '方案是否制定',
                    align: 'center',
                    key: 'isFou',
                    render:(h, params) =>{
                        if(params.row.riskOperationDtoList[0] && params.row.riskOperationDtoList[0].measuresDtoList.length > 0){
                            return h('span',{
                                style:{
                                    color:'green'
                                }
                            },'是')
                        }else{
                            return h('span',{
                                style:{
                                    color:'red'
                                }
                            },'否')
                        }
                    }
                },
                {
                    title: '操作',
                    slot: 'operation',
                    align: 'center',
                    className: 'table--operation'
                }
            ],
            // 风险等级
            riskLevels: [
                { text: 'I级', value: 1 },
                { text: 'II级', value: 2 },
                { text: 'III级', value: 3 },
                { text: 'IV级', value: 4 }
            ],
            pointId:'',
            planRow:{},
            source:'',
            planIndex:'',
            dynamicRiskOrderId:'',
            riskOperationId:'',
            obj:{
                dynamicRiskOrderListId:'',
                dynamicRiskOrderListName:'',
                pointId:'',
                pointName:'',
                pointCode:'',
                pointRiskGrade:'',
                pointRiskGradeName:'',
                pointRiskType:'',
                professionalType:'',
                professionalTypeName:'',
                note:'',
                projectId:'',
                projectName:'',
                enterpriseName:'',
                startTime:'',
                endTime:'',
                createTime:'',
                updateTime:'',
                status:'',
                isThisMonthWorked:'',
                riskOperationDtoList:[],
                isFou:''
            },
            gdIndex:'',
            currentRow:'',
            currentRiskRow:''
        }
    },
    mounted(){
        this.editListId()
    },
    methods:{
        editListId(){
            this.$api.MonthlyDynamics.editListId(this.$route.params.id).then(resp=>{
                if(resp.code == 200){
                    let arr = []
                    let pointData = resp.data.dynamicConstructionPointDtoList
                    pointData.forEach((a,y)=>{
                        a.startTime = this.$time(new Date(a.startTime),'yyyy-MM-dd')
                        a.endTime = this.$time(new Date(a.endTime),'yyyy-MM-dd')
                        a.isThisMonthWorked = a.isWorkedThisMonth
                        if(a.riskOperationDtoList.length > 0){
                            a.riskOperationDtoList.forEach((e,i)=>{
                                let temp = JSON.parse(JSON.stringify(a))
                                temp.riskOperationDtoList = [JSON.parse(JSON.stringify(e))]
                                arr.push(temp)
                            })
                        }
                    })
                    resp.data.dynamicConstructionPointDtoList = arr
                    this.projectName = resp.data.projectName
                    this.projectId = resp.data.projectId
                    this.dyNamicsObj = resp.data
                    
                }
            })
        },
        // 工点名称选择
        initSelectWork(index) {
            this.modal = true
            this.gdIndex = index
        },
        // 工点
        gongObj(list){
            let arr = []
            list.forEach(e=>{
                if(e.riskCategoryIds){
                    e.riskCategoryIds = e.riskCategoryIds.join(',')
                }
                let obj = {
                    dynamicRiskOrderListId:this.dyNamicsObj.dynamicRiskOrderListId,
                    dynamicRiskOrderListName:this.dyNamicsObj.dynamicRiskOrderListName,
                    pointId:e.pointId,
                    pointName:e.pointName,
                    pointCode:'',
                    pointRiskGrade:e.pointRiskGrade,
                    pointRiskGradeName:e.pointRiskGradeName,
                    pointRiskType:'',
                    professionalType:'',
                    professionalTypeName:'',
                    note:'',
                    projectId:e.projectId,
                    projectName:e.projectName,
                    enterpriseName:e.enterpriseName,
                    startTime:e.startTime,
                    endTime:e.endTime,
                    createTime:'',
                    updateTime:'',
                    status:'',
                    isThisMonthWorked:e.isWork,
                    riskOperationDtoList:[],
                    isFou:'',
                    source:e.source
                }
                e.measuresDtoList = []
                obj.riskOperationDtoList.push(e)
                arr.push(obj)
            })
            this.dyNamicsObj.dynamicConstructionPointDtoList.splice(this.gdIndex, 1, ...arr)
        },
        // 上月和下月的数据对接
        addList(list){
            list.forEach(e => {
                let obj = {
                    dynamicRiskOrderListId:this.dyNamicsObj.dynamicRiskOrderListId,
                    dynamicRiskOrderListName:this.dyNamicsObj.dynamicRiskOrderListName,
                    pointId:e.pointId,
                    pointName:e.pointName,
                    pointCode:'',
                    pointRiskGrade:e.pointRiskGrade,
                    pointRiskGradeName:e.pointRiskGradeName,
                    pointRiskType:'',
                    professionalType:'',
                    professionalTypeName:'',
                    note:'',
                    projectId:e.projectId,
                    projectName:e.projectName,
                    enterpriseName:e.enterpriseName,
                    startTime:e.startTime,
                    endTime:e.endTime,
                    createTime:'',
                    updateTime:'',
                    status:'',
                    isThisMonthWorked:e.isWorkedThisMonth,
                    riskOperationDtoList:[],
                    isFou:'',
                    source:e.source
                }
                e.constructionPointId = e.pointId
                e.measuresDtoList = []
                obj.riskOperationDtoList.push(e)
                this.dyNamicsObj.dynamicConstructionPointDtoList.push(obj)
            })
        },
        // 方案制定弹框
        plan(row, index) {
            this.pointId = row.pointId
            this.source = row.source
            if(row.pointId && row.riskOperationDtoList[0] && row.riskOperationDtoList[0].riskOperationId){
                this.planIndex = index
                this.dynamicRiskOrderId = row.riskOperationDtoList[0].riskOrderId
                this.riskOperationId = row.riskOperationDtoList[0].riskOperationId
                this.isPlan = !this.isPlan
                if(row.riskOperationDtoList[0].measuresDtoList.length > 0){
                    this.planRow = row.riskOperationDtoList[0]
                    this.$refs.planobj.rowSetObj()
                }else{
                    this.$refs.planobj.measuresNewId()
                }
            }else{
                this.$Message.warning('工点或者风险名称不能为空')
            }
        },
        // 方案制定数据对接
        isPlanObj(obj) {
            obj = JSON.parse(obj)
            this.dyNamicsObj.dynamicConstructionPointDtoList[this.planIndex].fa = true
            this.dyNamicsObj.dynamicConstructionPointDtoList[this.planIndex].riskOperationDtoList[0].riskControlRequirementTwo = ''
            this.dyNamicsObj.dynamicConstructionPointDtoList[this.planIndex].riskOperationDtoList[0].riskControlDetailOne = obj.riskControlDetailOne
            this.dyNamicsObj.dynamicConstructionPointDtoList[this.planIndex].riskOperationDtoList[0].riskControlRequirementOne = obj.riskControlRequirementOne
            this.dyNamicsObj.dynamicConstructionPointDtoList[this.planIndex].riskOperationDtoList[0].measuresDtoList = obj.measuresDtoList
            let arr = []
            this.dyNamicsObj.dynamicConstructionPointDtoList.forEach(e=>{
                arr.push(e)
            })
            this.dyNamicsObj.dynamicConstructionPointDtoList = arr
        },
        // 作业风险名称选择
        initSelectRisk(index) {
            if (!this.dyNamicsObj.dynamicConstructionPointDtoList[index].pointId) {
                this.$Message.error('请先选择工点')
                return
            }
            this.dynamicLledgerModel = true
            this.riskModal = true
            this.$refs.dynamicLledger.parentSetData()
            this.currentRiskRow = index
        },
        ledgerObj(obj) {
            let arr = []
                let rowObj = this.dyNamicsObj.dynamicConstructionPointDtoList[this.currentRow]
                this.dyNamicsObj.dynamicConstructionPointDtoList.splice(this.currentRow,1)
                obj.forEach((e,index)=>{
                    let temp = JSON.parse(JSON.stringify(rowObj))
                    this.dyNamicsObj.dynamicConstructionPointDtoList.splice((this.currentRow+index),0,temp)
                })
                obj.forEach((e,index)=>{
                    let obj = {
                        riskOrderId:e.id,
                        constructionPointId:e.constructionPointId,
                        riskOperationId:e.riskOperationId,
                        riskOperationName:e.riskName,
                        riskCategoryIds:e.riskCategoryIds,
                        riskCategoryNames:e.riskCategoryNames,
                        riskLevel:e.riskLevel,
                        riskLevelName:e.riskLevelName,
                        classificationMethodId:e.classificationMethodId,
                        classificationMethodName:e.classificationMethodName,
                        riskDescription:e.riskDescription,
                        measuresDtoList:[],
                        measuresCnt:'',
                        dynamicApprovalRecordList:[],
                        createTime:e.startTime,
                        updateTime:e.endTime,
                        status:'',
                        riskControlRequirementOne:'',
                        riskControlDetailOne:'',
                        riskControlRequirementTwo:'',
                        planFormulated:''
                    }
                    this.dyNamicsObj.dynamicConstructionPointDtoList[this.currentRow + index].riskOperationDtoList = [obj]
                })
        },
        // 作业风险名称框关闭
        isdynamicLledger(str) {
            this.dynamicLledgerModel = str
        },
        // 关闭lastmonth框
        isLastMonthMethods(str) {
            this.isLastMonth = str
        },
        // 关闭nextMonthMethod框
        isNextMonthMethods(str) {
            this.isNextMonth = str
        },
        // 关闭工点
        isGongdian(str){
            this.modal = str
        },
        // 方案制定plan框关闭
        isPlanMethods(str) {
            this.isPlan = str
        },
        // 新增一行
        addRow(){
            this.currentRow = this.dyNamicsObj.dynamicConstructionPointDtoList.length
            let obj = {
                riskOrderId:'',
                constructionPointId:'',
                riskOperationId:'',
                riskOperationName:'',
                riskCategoryIds:'',
                riskCategoryNames:'',
                riskLevel:'',
                riskLevelName:'',
                classificationMethodId:'',
                classificationMethodName:'',
                riskDescription:'',
                measuresDtoList:[],
                measuresCnt:'',
                dynamicApprovalRecordList:[],
                createTime:'',
                updateTime:'',
                status:'',
                riskControlRequirementOne:'',
                riskControlDetailOne:'',
                riskControlRequirementTwo:'',
                planFormulated:''
            }
            this.obj.riskOperationDtoList.push(obj)
            this.dyNamicsObj.dynamicConstructionPointDtoList.push(this.obj)
        },
        // 下家一行
        addInnerRow(row, index) {
            this.currentRow = index + 1
            let copy = JSON.parse(JSON.stringify(row))
            copy.riskOperationDtoList = []
            this.dyNamicsObj.dynamicConstructionPointDtoList.splice(index + 1, 0, copy)
        },
        // 获取风险类型
        initRiskCategories() {
            this.$api.measuresLibrary.getRiskCategoryFindAll().then(({ code, data }) => {
                if (code === 200) {
                    this.riskCategories = data
                }
            })
        },
        initRemoveRow(index){
            this.$Modal.confirm({
                title: '删除提示',
                content: '<p>确认删除当前项吗？</p>',
                okText: '确定',
                cancelText: '取消',
                onOk: () => {
                    this.dyNamicsObj.dynamicConstructionPointDtoList.splice(index, 1)
                }
            })
        },
        ...mapMutations(['closeTag']),
        save(){
            if (this.dyNamicsObj.dynamicConstructionPointDtoList.length === 0) {
                this.$Message.error('列表不能为空')
                return
            }
            for(let i = 0; i < this.dyNamicsObj.dynamicConstructionPointDtoList.length; i++){
                if(this.dyNamicsObj.dynamicConstructionPointDtoList[i].riskOperationDtoList[0].measuresDtoList.length == 0){
                    this.$Message.error('方案措施不能为空！')
                    this.isSave = false
                    break
                }else{
                    this.isSave = true
                }
            }
            if(this.isSave){
                this.$api.MonthlyDynamics.editParmes(this.dyNamicsObj).then(resp=>{
                    if(resp.code == 200){
                        this.$Message.success('修改成功')
                        this.closeTab()
                    }else{
                        this.$Message.error(resp.message)
                    }
                })
            }
        },
        closeTab(){
            this.closeTag({
                name: 'dynamics-edit',
                params: { ...this.$route.params },
                query: { ...this.$route.query }
            })
        }
    }
}
</script>